<template>
  <div class="features-container">
    <!-- 固定头部区域 -->
    <div class="fixed-header">
      <!-- Logo区域 -->
      <div class="logo-area" @click="goHome">
        <img
            src="../assets/images/logo.png"
            alt="Logo"
            class="logo-image"
        >
        <span class="logo-text">焰翼码栈</span>
      </div>

      <!-- 搜索框 -->
      <div class="search-container">
        <el-input
            v-model="searchQuery"
            placeholder="搜索功能..."
            class="search-input"
            clearable
            @input="handleSearch"
        >
          <template #prefix>
            <el-icon class="search-icon">
              <Search/>
            </el-icon>
          </template>
        </el-input>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content">
      <!-- 功能卡片区域 -->
      <div class="features-grid">
        <!-- 循环渲染每个分类 -->
        <div v-for="category in filteredCategories" :key="category.id" class="category-section">
          <h2 class="category-title">
            <el-icon class="category-icon">
              <component :is="category.icon"/>
            </el-icon>
            <span>{{ category.name }}</span>
            <span class="category-count">{{ category.features.length }}个项目</span>
          </h2>
          <div class="cards-container">
            <!-- 循环渲染每个功能卡片 -->
            <el-card
                v-for="feature in category.features"
                :key="feature.path"
                class="feature-card"
                shadow="hover"
                @click="navigateTo(feature.path)"
            >
              <div class="card-content">
                <div class="card-icon" :class="`${feature.type}-icon`">
                  <component :is="feature.icon" v-if="feature.iconComponent"/>
                  <svg v-else :viewBox="feature.iconViewBox" width="80" height="80" v-html="feature.iconPath"></svg>
                </div>
                <h3 class="card-title">{{ feature.title }}</h3>
                <p class="card-desc">{{ feature.description }}</p>
                <el-tag class="card-tag" :color="feature.tagColor || '#00bcd4'" effect="dark">{{ feature.tag }}</el-tag>
              </div>
            </el-card>
          </div>
        </div>
      </div>
    </div>

    <!-- 返回顶部按钮 -->
    <el-backtop :right="30" :bottom="30"/>
  </div>
</template>

<script setup>
import {ref, computed, onMounted} from 'vue'
import {useRouter} from 'vue-router'
import {Folder, Notebook, Document, Memo, Search} from '@element-plus/icons-vue'

const router = useRouter()
const searchQuery = ref('')

const goHome = () => {
  router.push('/home')
}

const navigateTo = (path) => {
  router.push(path)
}

// 功能数据
const categories = [
  {
    id: 'projects',
    name: '我的项目',
    icon: Folder,
    features: [
      {
        title: '爱心页面',
        description: '有趣的爱心动画，好玩又有趣',
        path: '/love-heart',
        type: 'ai',
        iconViewBox: '0 0 1024 1024',
        iconPath: '<path\n' +
            ' d="M5.1 831.1h253.5c2.8 0 5.1-2.3 5.1-5.1s-2.3-5.1-5.1-5.1H5.1c-2.8 0-5.1 2.3-5.1 5.1 0 2.9 2.3 5.1 5.1 5.1z m314.3 0h55.8c2.8 0 5.1-2.3 5.1-5.1s-2.3-5.1-5.1-5.1h-55.8c-2.8 0-5.1 2.3-5.1 5.1 0.1 2.9 2.3 5.1 5.1 5.1z m106.5 0h253.5c2.8 0 5.1-2.3 5.1-5.1s-2.3-5.1-5.1-5.1H425.9c-2.8 0-5.1 2.3-5.1 5.1 0 2.9 2.3 5.1 5.1 5.1z m314.4 0H796c2.8 0 5.1-2.3 5.1-5.1s-2.3-5.1-5.1-5.1h-55.8c-2.8 0-5.1 2.3-5.1 5.1 0.1 2.9 2.4 5.1 5.2 5.1z m106.4 0h172.4c2.8 0 5.1-2.3 5.1-5.1s-2.3-5.1-5.1-5.1H846.7c-2.8 0-5.1 2.3-5.1 5.1 0.1 2.9 2.3 5.1 5.1 5.1z"\n' +
            ' fill="#3B0404"/>\n' +
            '\n' +
            '<!-- 主图形部分 -->\n' +
            '<path\n' +
            'd="M409.6 803.5H86.9c-14 0-25.4-11.4-25.4-25.4 0-14 11.4-25.4 25.4-25.4h118.2c-10.1-3.4-17.3-12.9-17.3-24 0-10.9 6.8-20.1 16.4-23.7h-73.9c-14 0-25.4-11.4-25.4-25.4 0-14 11.4-25.4 25.4-25.4h130.1l-40.8-40.8-1.8-1.8c-88.1-88.1-88.1-231 0-319.1s231-88.1 319.1 0l1.8 1.8 1.8-1.8c88.1-88.1 231-88.1 319.1 0 88.1 88.1 88.1 231 0 319.1l-1.8 1.8L560.2 911c-11.9 11.9-31.1 11.9-43 0L409.6 803.5zM54.5 753.1c-14 0-25.4-11.4-25.4-25.4 0-14 11.4-25.4 25.4-25.4s25.4 11.4 25.4 25.4c0 14.1-11.4 25.4-25.4 25.4z"\n' +
            'fill="#FF5E5E"/>\n' +
            '\n' +
            '<!-- 内部装饰元素 -->\n' +
            '<path\n' +
            'd="M668.1 228.8c67.9-9.7 139.3 11.6 191.5 63.8 88.1 88.1 88.1 231 0 319.1l-1.8 1.8L560.2 911c-11.9 11.9-31.1 11.9-43 0l-5.1-5.1 291.3-291.4 1.8-1.8c88.1-88.1 88.1-231 0-319.1-38.3-38.2-87-59.9-137.1-64.8z"\n' +
            'fill="#CB2828"/>\n' +
            '\n' +
            '                  <!-- 细节装饰元素 -->\n' +
            '                  <path\n' +
            '                      d="M196 633.3c2 2 2 5.2 0 7.2s-5.2 2-7.2 0L165.3 617l-1-1-0.3-0.3-0.5-0.5c-54.3-54.3-77.4-130.8-63.8-204.9 0.5-2.8 3.1-4.6 5.9-4.1 2.8 0.5 4.6 3.1 4.1 5.9-13 70.9 9.1 144 61 195.9l0.5 0.5 0.3 0.3 1.1 1.1 23.4 23.4z"\n' +
            '                      fill="#3B0404"/>\n' +
            '\n' +
            '                  <!-- 圆形装饰元素 -->\n' +
            '                  <path\n' +
            '                      d="M494.3 514.2c-8.4 0-15.2-6.8-15.2-15.2s6.8-15.2 15.2-15.2c8.4 0 15.2 6.8 15.2 15.2s-6.8 15.2-15.2 15.2z m91.3 0c-8.4 0-15.2-6.8-15.2-15.2s6.8-15.2 15.2-15.2 15.2 6.8 15.2 15.2-6.8 15.2-15.2 15.2z"\n' +
            '                      fill="#3B0404"/>\n' +
            '\n' +
            '                  <!-- 大圆形装饰 -->\n' +
            '                  <path\n' +
            '                      d="M332.1 483.8c-30.8 0-55.8-25-55.8-55.8s25-55.8 55.8-55.8 55.8 25 55.8 55.8-25 55.8-55.8 55.8z m415.8 0c-30.8 0-55.8-25-55.8-55.8s25-55.8 55.8-55.8 55.8 25 55.8 55.8-25 55.8-55.8 55.8z"\n' +
            '                      fill="#F54040"/>\n' +
            '\n' +
            '                  <!-- 顶部装饰元素 -->\n' +
            '                  <path\n' +
            '                      d="M871.4 125.7v-0.3c0-14.9 12.1-26.9 26.9-26.9s26.9 12.1 26.9 26.9V160.6c0 10.5-8.5 19-19 19H871c-14.9 0-26.9-12.1-26.9-26.9s12.1-26.9 26.9-26.9c0.2-0.1 0.3-0.1 0.4-0.1z"\n' +
            '                      fill="#FF5E5E"/>',
        tag: '特效',
        tagColor: '#FF00FF'
      },
      {
        title: '五子棋',
        description: '五子棋',
        path: '/gomoku-game',
        type: 'ai',
        iconViewBox: '0 0 1024 1024',
        iconPath: '<path d="M76.8 76.8h870.4v870.4H76.8z" fill="#FFDD50"/>\n' +
            '                  <path\n' +
            '                      d="M559.97952 312.51968a150.86592 150.73792 0 1 0 301.73184 0 150.86592 150.73792 0 1 0-301.73184 0Z"\n' +
            '                      fill="currentColor"/>\n' +
            '                  <path\n' +
            '                      d="M161.3312 710.8352a150.86592 150.73792 0 1 0 301.73184 0 150.86592 150.73792 0 1 0-301.73184 0Z"\n' +
            '                      fill="currentColor"/>\n' +
            '                  <path\n' +
            '                      d="M942.05952 330.4448H81.94048c-9.9072 0-17.94048-8.02304-17.94048-17.92512s8.03328-17.92512 17.94048-17.92512h860.11904c9.9072 0 17.94048 8.02304 17.94048 17.92512s-8.03328 17.92512-17.94048 17.92512z"\n' +
            '                      fill="currentColor"/>\n' +
            '                  <path\n' +
            '                      d="M312.19712 960a17.93536 17.93536 0 0 1-17.94048-17.92512V81.92512a17.93024 17.93024 0 0 1 17.94048-17.92512 17.93024 17.93024 0 0 1 17.94048 17.92512v860.14976a17.93536 17.93536 0 0 1-17.94048 17.92512z"\n' +
            '                      fill="currentColor"/>\n' +
            '                  <path\n' +
            '                      d="M942.05952 728.76032H81.94048c-9.9072 0-17.94048-8.02816-17.94048-17.92512s8.03328-17.92512 17.94048-17.92512h860.11904c9.9072 0 17.94048 8.02816 17.94048 17.92512s-8.03328 17.92512-17.94048 17.92512z"\n' +
            '                      fill="currentColor"/>\n' +
            '                  <path\n' +
            '                      d="M710.84544 960a17.93536 17.93536 0 0 1-17.94048-17.92512V81.92512c0-9.90208 8.03328-17.92512 17.94048-17.92512s17.94048 8.02304 17.94048 17.92512v860.14976a17.94048 17.94048 0 0 1-17.94048 17.92512z"\n' +
            '                      fill="currentColor"/>\n' +
            '                  <path\n' +
            '                      d="M179.80416 312.51968a132.39296 132.28032 0 1 0 264.78592 0 132.39296 132.28032 0 1 0-264.78592 0Z"\n' +
            '                      fill="#FFFFFF"/>\n' +
            '                  <path\n' +
            '                      d="M312.19712 197.632c63.40096 0 114.98496 51.53792 114.98496 114.88768s-51.584 114.8928-114.98496 114.8928-114.99008-51.54304-114.99008-114.8928S248.79104 197.632 312.19712 197.632m0-35.85024c-83.31776 0-150.86592 67.48672-150.86592 150.73792 0 83.2512 67.54304 150.73792 150.86592 150.73792 83.31776 0 150.86592-67.48672 150.86592-150.73792-0.00512-83.2512-67.54816-150.73792-150.86592-150.73792z"\n' +
            '                      fill="currentColor"/>\n' +
            '                  <path d="M578.67264 710.8352a132.1728 132.06528 0 1 0 264.3456 0 132.1728 132.06528 0 1 0-264.3456 0Z"\n' +
            '                        fill="#FFFFFF"/>\n' +
            '                  <path\n' +
            '                      d="M710.84544 595.94752c63.40096 0 114.98496 51.53792 114.98496 114.88768s-51.584 114.88768-114.98496 114.88768c-63.40608 0-114.98496-51.53792-114.98496-114.88768s51.57888-114.88768 114.98496-114.88768m0-35.85024c-83.31776 0-150.86592 67.48672-150.86592 150.73792 0 83.2512 67.54304 150.73792 150.86592 150.73792s150.86592-67.48672 150.86592-150.73792c-0.00512-83.2512-67.54816-150.73792-150.86592-150.73792z"\n' +
            '                      fill="currentColor"/>',
        tag: '游戏',
        tagColor: '#f44336'
      },
      {
        title: '中国象棋',
        description: '中国象棋',
        path: '/chinese-chess',
        type: 'ai',
        iconViewBox: '0 0 1024 1024',
        iconPath: '<path d="M0 51.2h972.8v972.8H0z" fill="#FFFFFF" fill-opacity="0"/>\n' +
            '                  <path\n' +
            '                      d="M512 51.2c-254.976 0-460.8 205.824-460.8 460.8s205.824 460.8 460.8 460.8 460.8-205.824 460.8-460.8-205.824-460.8-460.8-460.8z m0 870.912c-225.792 0-410.112-184.32-410.112-410.112S286.208 101.888 512 101.888s410.112 184.32 410.112 410.112-184.32 410.112-410.112 410.112z"\n' +
            '                      fill="#FEDE80"/>\n' +
            '                  <path\n' +
            '                      d="M512 117.248c-218.112 0-394.752 176.64-394.752 394.752s176.64 394.752 394.752 394.752 394.752-176.64 394.752-394.752S730.112 117.248 512 117.248z"\n' +
            '                      fill="#FF8934"/>\n' +
            '                  <path\n' +
            '                      d="M760.832 671.744c-15.36 13.824-30.72 27.648-39.936 46.08-6.144 13.824-13.824 16.896-24.576 10.752-61.44-24.576-101.376-81.408-122.88-168.96-9.216 0-13.824 0-18.432 1.536 15.36 29.184 24.576 69.12 23.04 121.344 0 50.688-30.72 81.408-90.624 90.624-19.968 4.608-32.256 0-32.256-13.824-1.536-19.968-13.824-33.792-38.4-39.936-13.824-3.072-16.896-7.68-13.824-13.824 0-4.608 6.144-6.144 18.432-6.144 52.224 4.608 78.336-7.68 75.264-35.328v-13.824c-47.616 32.256-124.416 62.976-227.328 92.16-7.68 0-12.288-1.536-13.824-4.608-1.536-3.072 1.536-6.144 9.216-9.216 96.768-53.76 172.032-105.984 221.184-156.672v1.536c-67.584 53.76-133.632 89.088-201.216 101.376-7.68 1.536-12.288 1.536-13.824 0 0-3.072 3.072-6.144 9.216-10.752 56.832-38.4 107.52-79.872 148.992-127.488-32.256 16.896-81.408 35.328-148.992 52.224-9.216 3.072-13.824 1.536-13.824-1.536s3.072-6.144 10.752-10.752c62.976-33.792 110.592-67.584 144.384-104.448h-27.648v10.752c0 12.288-6.144 18.432-15.36 23.04-13.824 4.608-26.112 6.144-41.472 6.144-16.896 3.072-26.112-4.608-23.04-23.04v-13.824c3.072-15.36 4.608-27.648 4.608-35.328V419.84c-18.432 9.216-36.864 15.36-52.224 19.968-7.68 1.536-12.288 0-13.824-1.536-1.536-3.072 0-6.144 6.144-10.752l4.608-4.608c39.936-36.864 72.192-69.12 96.768-99.84 15.36-16.896 29.184-39.936 41.472-67.584 3.072-6.144 9.216-7.68 18.432-6.144 30.72 6.144 61.44 13.824 92.16 23.04 6.144 3.072 9.216 7.68 9.216 13.824-1.536 6.144-4.608 9.216-10.752 9.216-13.824 3.072-23.04 6.144-27.648 10.752l-9.216 9.216h46.08c12.288-15.36 21.504-27.648 32.256-32.256 19.968 7.68 46.08 21.504 75.264 43.008 6.144 10.752 7.68 16.896 6.144 23.04-3.072 4.608-9.216 6.144-18.432 6.144-24.576 1.536-52.224 12.288-82.944 29.184h95.232c12.288-15.36 18.432-24.576 24.576-24.576 30.72 12.288 55.296 26.112 75.264 43.008 0 7.68-3.072 12.288-10.752 13.824-6.144 4.608-9.216 9.216-9.216 13.824v6.144c1.536 7.68 1.536 13.824 1.536 23.04 1.536 15.36-3.072 24.576-13.824 27.648-6.144 1.536-10.752 3.072-13.824 4.608 13.824 10.752 24.576 18.432 38.4 29.184 4.608 6.144 6.144 12.288 4.608 15.36-4.608 6.144-9.216 7.68-13.824 6.144-13.824 0-26.112 0-43.008 1.536-23.04 4.608-47.616 9.216-72.192 13.824 39.936 56.832 95.232 89.088 159.744 95.232 6.144 1.536 9.216 4.608 10.752 10.752 4.608 0 1.536 4.608-4.608 7.68z"\n' +
            '                      fill="#FFEBB1"/>\n' +
            '                  <path\n' +
            '                      d="M633.344 402.944h-56.832c-12.288 19.968-23.04 39.936-38.4 56.832h95.232V402.944z m-1.536 70.656h-105.984c-12.288 12.288-21.504 19.968-33.792 29.184 19.968 12.288 38.4 24.576 49.152 39.936 41.472-24.576 72.192-47.616 90.624-69.12zM398.336 416.768v43.008h41.472c13.824-16.896 26.112-36.864 38.4-56.832H402.944c-3.072 4.608-4.608 9.216-4.608 13.824z m129.024-84.48H459.776c-19.968 16.896-41.472 33.792-64.512 47.616 1.536 0 3.072 0 6.144 1.536 4.608 1.536 6.144 3.072 6.144 4.608h95.232l24.576-53.76z"\n' +
            '                      fill="#FF8934"/>',
        tag: '游戏',
        tagColor: '#f44336'
      },
      {
        title: '手写数字识别',
        description: '手写数字识别',
        path: '/cnn-hand-write-number',
        type: 'ai',
        iconViewBox: '0 0 1024 1024',
        iconPath: '<path d="M195.254237 93.288136h850.440678v850.440678H195.254237z" fill="#F7F6F4"></path>\n' +
            '                  <path d="M256.867797 154.901695h729.38305v729.383051H256.867797z" fill="#FDFFFE"></path>\n' +
            '                  <path\n' +
            '                      d="M1067.389831 965.423729H173.125424V71.159322H1067.389831v894.264407z m-21.694916-872.135593H195.254237v850.440678h850.440678v-850.440678z"\n' +
            '                      fill="#B98963"></path>\n' +
            '                  <path\n' +
            '                      d="M994.061017 892.094915H246.454237V144.488136h747.60678v747.606779z m-18.223729-729.383051H264.677966v710.725424h710.725424V162.711864z"\n' +
            '                      fill="#B98963"></path>\n' +
            '                  <path\n' +
            '                      d="M442.142373 681.220339H798.372881v14.752542h-356.230508zM509.830508 738.061017h220.854238v10.413559h-220.854238zM876.040678 373.586441h-27.335593v154.901695H759.322034V373.586441h-28.20339v180.935593H876.474576V373.586441z m-189.179661 0h-148.39322v180.935593h28.203389v-70.725424h120.189831V373.586441z m-120.189831 84.176271V399.620339h91.986441v58.576271h-91.986441z m-68.555932 70.725424h-104.135593V399.620339h103.701695v-26.033898H364.474576v180.935593h133.20678v-26.033898z"\n' +
            '                      fill="#B98963"></path>\n' +
            '                  <path\n' +
            '                      d="M876.040678 373.586441v-2.60339H846.101695v154.901695h-84.61017V370.983051h-33.410169v186.142373h150.562712V370.983051h-2.60339v2.60339h-2.60339v178.332203H733.288136V376.189831h23.430508v154.901694h94.589831V376.189831h24.732203v-2.60339h-2.60339 2.60339z m-189.179661 0v-2.60339h-150.99661v186.142373h33.410169v-70.725424h120.189831V370.983051h-2.60339v2.60339h-2.60339v107.606779H564.067797v70.725424h-23.430509V376.189831h145.789831v-2.60339h-2.60339 3.037288z m-120.189831 84.176271h2.60339V402.223729h86.779661V455.59322h-89.383051v2.169492h2.60339-2.60339v2.60339h94.155933V397.016949H564.067797v63.783051h2.603389v-3.037288z m-68.555932 70.725424v-2.60339H396.583051V402.223729h103.701695v-31.240678H361.871186v186.142373h138.41356v-31.240678h-2.60339v2.60339h-2.60339v23.430508H367.077966V376.189831h128v20.827118H391.376271v134.508475h106.305085v-3.037288h-2.60339 3.037288zM219.986441 16.054237h26.467796v59.01017h-26.467796zM272.054237 16.054237h26.467797v59.01017h-26.467797zM324.122034 16.054237h26.467797v59.01017h-26.467797zM376.189831 16.054237h26.467796v59.01017h-26.467796zM427.823729 16.054237h26.467796v59.01017h-26.467796zM479.891525 16.054237h26.467797v59.01017h-26.467797zM531.959322 16.054237h26.467797v59.01017h-26.467797zM583.59322 16.054237h26.467797v59.01017h-26.467797zM635.661017 16.054237h26.467797v59.01017h-26.467797zM687.728814 16.054237h26.467796v59.01017h-26.467796zM739.362712 16.054237h26.467796v59.01017h-26.467796zM791.430508 16.054237h26.467797v59.01017h-26.467797zM843.498305 16.054237h26.467797v59.01017h-26.467797zM895.132203 16.054237h26.467797v59.01017h-26.467797zM947.2 16.054237h26.467797v59.01017h-26.467797zM999.267797 16.054237h26.467796v59.01017h-26.467796zM1119.813424 115.438644v26.467797h-59.01017v-26.467797zM1119.683254 167.371932v26.467797h-59.010169v-26.467797zM1119.978305 219.309559v26.467797h-59.010169v-26.467797zM1119.848136 271.242847v26.467797h-59.01017v-26.467797zM1119.717966 323.176136v26.467796h-59.010169v-26.467796zM1120.017356 375.113763v26.467796h-59.01017v-26.467796zM1119.882847 427.042712v26.467796h-59.010169v-26.467796zM1119.748339 478.980339v26.467797h-59.01017v-26.467797zM1120.052068 530.917966v26.467797h-59.01017v-26.467797zM1119.917559 582.851254v26.467797h-59.010169v-26.467797zM1119.783051 634.784542v26.467797h-59.01017v-26.467797zM1120.082441 686.717831v26.467796h-59.01017v-26.467796zM1119.952271 738.655458v26.467796h-59.010169v-26.467796zM1119.817763 790.588746v26.467796h-59.01017v-26.467796zM1119.683254 842.522034v26.467797h-59.010169v-26.467797zM1119.986983 894.455322v26.467797h-59.010169v-26.467797zM179.79878 115.633898v26.467797h-59.01017v-26.467797zM179.664271 167.567186v26.467797h-59.010169v-26.467797zM179.968 219.500475v26.467796h-59.010169v-26.467796zM179.833492 271.433763v26.467796h-59.01017v-26.467796zM179.698983 323.367051v26.467796h-59.010169v-26.467796zM179.998373 375.304678v26.467797h-59.01017v-26.467797zM179.868203 427.237966v26.467797h-59.010169v-26.467797zM179.733695 479.171254v26.467797h-59.01017v-26.467797zM180.033085 531.108881v26.467797h-59.01017v-26.467797zM179.902915 583.042169v26.467797h-59.010169v-26.467797zM179.768407 634.975458v26.467796h-59.01017v-26.467796zM180.067797 686.908746v26.467796H121.057627v-26.467796zM179.937627 738.842034v26.467797h-59.010169v-26.467797zM179.803119 790.779661v26.467797h-59.01017v-26.467797zM179.66861 842.717288v26.467797h-59.010169v-26.467797zM179.968 894.650576v26.467797h-59.010169v-26.467797zM219.986441 956.311864h26.467796V1015.322034h-26.467796zM272.054237 956.311864h26.467797V1015.322034h-26.467797zM324.122034 956.311864h26.467797V1015.322034h-26.467797zM376.189831 956.311864h26.467796V1015.322034h-26.467796zM427.823729 956.311864h26.467796V1015.322034h-26.467796zM479.891525 956.311864h26.467797V1015.322034h-26.467797zM531.959322 956.311864h26.467797V1015.322034h-26.467797zM583.59322 956.311864h26.467797V1015.322034h-26.4677926.467797V1015.322034h-26.467797zM635.661017 956.311864h26.467797V1015.322034h-26.467797zM687.728814 956.311864h26.467796V1015.322034h-26.467796zM739.362712 956.311864h26.467796V1015.322034h-26.467796zM791.430508 956.311864h26.467797V1015.322034h-26.467797zM843.498305 956.311864h26.467797V1015.322034h-26.467797zM895.132203 956.311864h26.467797V1015.322034h-26.467797zM947.2 956.311864h26.467797V1015.322034h-26.467797zM999.267797 956.311864h26.467796V1015.322034h-26.467796z"\n' +
            '                      fill="#B98963"></path>\n' +
            '                  <path\n' +
            '                      d="M303.728814 193.952542m-13.450848 0a13.450847 13.450847 0 1 0 26.901695 0 13.450847 13.450847 0 1 0-26.901695 0Z"\n' +
            '                      fill="#B98963"></path>\n' +
            '                  <path\n' +
            '                      d="M937.220339 193.952542m-13.450847 0a13.450847 13.450847 0 1 0 26.901694 0 13.450847 13.450847 0 1 0-26.901694 0Z"\n' +
            '                      fill="#B98963"></path>\n' +
            '                  <path\n' +
            '                      d="M303.728814 843.064407m-13.450848 0a13.450847 13.450847 0 1 0 26.901695 0 13.450847 13.450847 0 1 0-26.901695 0Z"\n' +
            '                      fill="#B98963"></path>\n' +
            '                  <path\n' +
            '                      d="M937.220339 843.064407m-13.450847 0a13.450847 13.450847 0 1 0 26.901694 0 13.450847 13.450847 0 1 0-26.901694 0Z"\n' +
            '                      fill="#B98963"></path>',
        tag: 'AI',
        tagColor: '#4caf50'
      },
      {
        title: '404测试页',
        description: '测试404页面跳转和错误处理',
        path: '/404',
        type: 'ai',
        iconViewBox: '0 0 1024 1024',
        iconPath: '<path\n' +
            '                      d="M931.6 585.6v79c28.6-60.2 44.8-127.4 44.8-198.4C976.4 211 769.4 4 514.2 4S52 211 52 466.2c0 3.2 0.2 6.4 0.2 9.6l166-206h96.4L171.8 485.6h46.4v-54.8l99.2-154.6V668h-99.2v-82.4H67.6c43 161 170.6 287.4 332.4 328.6-10.4 26.2-40.6 89.4-90.8 100.6-62.2 14 168.8 3.4 333.6-104.6C769.4 873.6 873.6 784.4 930.2 668h-97.6v-82.4H666.4V476l166.2-206.2h94L786.2 485.6h46.4v-59l99.2-154v313zM366.2 608c-4.8-11.2-7.2-23.2-7.2-36V357.6c0-12.8 2.4-24.8 7.2-36 4.8-11.2 11.4-21 19.6-29.2 8.2-8.2 18-14.8 29.2-19.6 11.2-4.8 23.2-7.2 36-7.2h81.6c12.8 0 24.8 2.4 36 7.2 11 4.8 20.6 11.2 28.8 19.2l-88.6 129.4v-23c0-4.8-1.6-8.8-4.8-12-3.2-3.2-7.2-4.8-12-4.8s-8.8 1.6-12 4.8c-3.2 3.2-4.8 7.2-4.8 12v72L372.6 620c-2.4-3.8-4.6-7.8-6.4-12z m258.2-36c0 12.8-2.4 24.8-7.2 36-4.8 11.2-11.4 21-19.6 29.2-8.2 8.2-18 14.8-29.2 19.6-11.2 4.8-23.2 7.2-36 7.2h-81.6c-12.8 0-24.8-2.4-36-7.2-11.2-4.8-21-11.4-29.2-19.6-3.6-3.6-7-7.8-10-12l99.2-144.6v50.6c0 4.8 1.6 8.8 4.8 12 3.2 3.2 7.2 4.8 12 4.8s8.8-1.6 12-4.8c3.2-3.2 4.8-7.2 4.8-12v-99.6L601 296.4c6.6 7.4 12 15.8 16 25.2 4.8 11.2 7.2 23.2 7.2 36V572z"\n' +
            '                      fill="#e73725"/>',
        tag: '测试',
        tagColor: '#2196f3'
      },
      {
        title: 'CIFAR10分类',
        description: '使用深度学习模型对CIFAR10图像进行分类',
        path: '/cifar10-classifier',
        type: 'ai',
        iconViewBox: '0 0 1024 1024',
        iconPath: '<path d="M329.142857 438.857143c40.393143 0 73.142857-32.749714 73.142857-73.142857 0-40.411429-32.749714-73.142857-73.142857-73.142857-40.356571 0-73.142857 32.731429-73.142857 73.142857C256 406.107429 288.786286 438.857143 329.142857 438.857143z" fill="#F69661"></path><path d="M658.285714 393.142857 441.536 698.784914 329.142857 542.749257 146.285714 804.571429 877.714286 804.571429Z" fill="#F69661"></path><path d="M950.857143 91.428571 73.142857 91.428571c-20.214857 0-36.571429 16.374857-36.571429 36.571429l0 768c0 20.214857 16.356571 36.571429 36.571429 36.571429l877.714286 0c20.214857 0 36.571429-16.356571 36.571429-36.571429L987.428571 128C987.428571 107.803429 971.072 91.428571 950.857143 91.428571zM914.285714 859.428571 109.714286 859.428571 109.714286 164.571429l804.571429 0L914.285714 859.428571z" fill="#F69661"></path>',
        tag: 'AI',
        tagColor: '#4caf50'
      },
      {
        title: 'AI对话',
        description: '与AI进行智能对话交流',
        path: '/ai-chat',
        type: 'ai',
        iconViewBox: '0 0 1024 1024',
        iconPath: '<path\n' +
            '                      d="M832 839.9H203.3c-10.8 0-19.6-8.8-19.6-19.6V547.5c0-109.8 89.3-199.2 199.2-199.2h269.4c109.8 0 199.2 89.4 199.2 199.2v272.8c0.1 10.8-8.7 19.6-19.5 19.6z m-609.1-39.2h589.5V547.5c0-88.2-71.8-160-160-160H382.9c-88.2 0-160 71.8-160 160v253.2z"\n' +
            '                      fill="#1E94FC"></path>\n' +
            '                  <path\n' +
            '                      d="M665.8 609.2H369.5c-33.1 0-60-26.9-60-60s26.9-60 60-60h296.4c33.1 0 60 26.9 60 60-0.1 33.1-27 60-60.1 60z m-296.3-80.8c-11.5 0-20.8 9.3-20.8 20.8S358 570 369.5 570h296.4c11.5 0 20.8-9.4 20.8-20.8 0-11.5-9.3-20.8-20.8-20.8H369.5z"\n' +
            '                      fill="#28E3C4"></path>\n' +
            '                  <path\n' +
            '                      d="M192.1 730.4h-44.9c-15.8 0-28.6-12.8-28.6-28.6V612c0-15.8 12.8-28.6 28.6-28.6h44.9c10.8 0 19.6 8.8 19.6 19.6s-8.8 19.6-19.6 19.6h-34.3v68.6h34.3c10.8 0 19.6 8.8 19.6 19.6s-8.8 19.6-19.6 19.6zM883.6 730.4h-44.9c-10.8 0-19.6-8.8-19.6-19.6s8.8-19.6 19.6-19.6H873v-68.6h-34.3c-10.8 0-19.6-8.8-19.6-19.6s8.8-19.6 19.6-19.6h44.9c15.8 0 28.6 12.8 28.6 28.6v89.8c0 15.8-12.8 28.6-28.6 28.6zM627.7 384.7c-4.4 0-8.9-1.5-12.6-4.6-8.3-6.9-9.4-19.3-2.4-27.6l139.2-166.1c6.9-8.3 19.3-9.4 27.6-2.4 8.3 6.9 9.4 19.3 2.4 27.6L642.7 377.7c-3.9 4.6-9.4 7-15 7zM403.1 384.7c-5.6 0-11.1-2.4-15-7L248.9 211.5c-7-8.3-5.9-20.7 2.4-27.6 8.3-7 20.6-5.9 27.6 2.4l139.2 166.1c7 8.3 5.9 20.7-2.4 27.6-3.6 3.2-8.1 4.7-12.6 4.7z"\n' +
            '                      fill="#1E94FC"></path>\n' +
            '                  <path\n' +
            '                      d="M780.3 218.9c-23.4 0-42.5-19-42.5-42.5s19-42.5 42.5-42.5 42.5 19 42.5 42.5-19 42.5-42.5 42.5z m0-44.9c-1.4 0-2.5 1.1-2.5 2.5s1.1 2.5 2.5 2.5 2.5-1.1 2.5-2.5-1.1-2.5-2.5-2.5zM250.5 218.9c-23.4 0-42.5-19-42.5-42.5s19-42.5 42.5-42.5 42.5 19 42.5 42.5-19.1 42.5-42.5 42.5z m0-44.9c-1.4 0-2.5 1.1-2.5 2.5s1.1 2.5 2.5 2.5 2.5-1.1 2.5-2.5-1.2-2.5-2.5-2.5z"\n' +
            '                      fill="#1E94FC"></path>',
        tag: 'AI',
        tagColor: '#4caf50'
      },
      {
        title: '植物大战僵尸',
        description: '植物大战僵尸',
        path: '/plants-zombies',
        type: 'ai',
        iconViewBox: '0 0 1024 1024',
        iconPath: '<path\n' +
            '                      d="M1114.693494 1.047983c45.092251-3.149948 89.593513 0.787987 133.109791 12.0118 43.516278 11.223814 82.307634 25.203582 116.176071 41.941304 33.867438 16.736722 61.237983 34.458428 82.306633 53.165117 20.872653 18.902686 31.505477 34.655425 31.505477 47.651209 0 12.995784-8.072866 20.675657-24.219598 23.431611-16.146732 2.756954-36.231399 5.119915-60.450996 7.285879-24.219598 2.165964-50.802157 6.103899-79.747676 12.011801-28.944519 5.906902-56.512062 19.099683-82.306634 39.578343-17.130716 12.995784-33.671441 27.172549-49.227182 42.72929-15.555742 15.554742-31.111484 30.71649-46.864222 45.091252-15.555742 14.570758-31.701474 27.960536-48.439196 40.36633-16.736722 12.404794-34.655425 21.856637-53.952105 28.157532-9.64884 3.149948-21.463644 6.497892-35.443411 9.64884-13.980768 3.149948-28.749523 3.937935-44.304265 2.362961-15.555742-1.575974-31.702474-6.694889-48.439195-15.359745-16.934719-8.269863-32.883454-22.840621-47.849206-43.122284-9.64784 12.799788-18.115699 28.157533-25.006585 45.879238-7.089882 17.721706-13.192781 36.822389-18.509693 57.300049-5.316912 20.47866-10.041833 41.744307-13.783771 63.798941-3.740938 22.052634-6.694889 42.729291-8.859853 62.02497-2.166964 16.146732-3.741938 36.231399-4.923918 60.450996-0.983984 24.219598-1.377977 48.045202-0.786987 71.870807 0.58999 23.629608 1.968967 45.486245 3.937935 65.373915 2.165964 19.88767 5.316912 34.064434 9.64884 42.72929 5.315912 9.64784 8.072866 17.720706 8.072866 24.219598 0 5.315912-2.756954 10.435827-8.072866 15.358745-5.316912 4.921918-15.555742 7.284879-30.71749 7.284879-17.131716 0-28.749523-2.362961-34.656425-7.284879-5.906902-4.922918-8.859853-10.042833-8.859853-15.359745-0.984984-6.497892 0.983984-13.979768 6.496892-22.643624 5.316912-10.82982 8.860853-23.432611 10.436827-38.003369 1.574974-14.570758 2.165964-30.1265 1.574974-46.864222a2298.481842 2298.481842 0 0 0-2.362961-50.802156c-0.984984-17.130716-1.574974-33.867438-1.574974-50.01417-16.934719-34.262431-33.671441-63.403947-49.818173-87.033555-16.145732-23.629608-33.867438-46.273232-53.165117-67.735876-11.813804 25.794572-25.597575 45.091251-41.153317 58.088036-15.555742 12.995784-31.505477 21.856637-47.652209 26.582559-16.145732 4.921918-31.504477 7.087882-45.879238 6.497892-14.570758-0.59099-27.172549-1.969967-38.003369-3.938935-19.29668-3.149948-37.609376-9.450843-54.937088-18.509693a592.13917 592.13917 0 0 1-51.589144-30.71649c-17.131716-11.223814-34.656425-23.432611-52.37813-36.231398-17.721706-12.995784-35.836405-24.219598-53.952105-33.868438-27.961536-16.145732-56.709059-24.809588-86.245568-25.794572-29.53651-0.983984-56.513062-0.196997-80.73266 2.362961-24.219598 2.756954-44.107268 3.740938-59.663009 3.149948C7.875869 425.581935 0 418.296056 0 404.315288c0-13.979768 8.860853-31.701474 26.582559-53.164118 17.721706-21.463644 41.350314-42.729291 70.886823-63.79894 29.53651-20.871653 64.191934-39.77534 103.967274-56.512062s81.716643-27.173549 125.823911-31.505477c67.735875-6.497892 123.854944-2.952951 168.553202 10.436826 44.697258 13.389778 79.550679 32.489461 104.754261 57.299049 25.598575 25.007585 41.350314 53.362114 47.849205 85.655578 6.497892 32.292464 5.315912 64.585928-3.150947 96.878392 34.459428 31.111484 68.326866 70.886823 101.604313 119.326019 5.316912-52.771124 18.705689-105.936241 40.36633-159.692349 8.663856-18.311696 16.736722-33.867438 24.219598-46.864222 7.481876-12.995784 16.736722-26.975552 27.369545-41.941304-17.327712-31.110484-26.188565-64.388931-26.582559-99.831342-0.58999-35.443412 9.64884-68.918856 30.717491-100.02934 21.06965-31.111484 53.559111-57.891039 97.666378-79.944672 43.910271-22.053634 101.998307-35.246415 174.06711-39.578343z m-480.848017 443.632635c-60.057003-51.589144-123.657947-84.866591-190.212842-100.02834-66.751892-14.965752-135.471751-13.389778-206.556571 4.921919-2.164964 0-2.755954 0.196997-1.574974 0.787986 0.984984 0.58999 2.756954 0.787987 4.922919 0.787987a798.203749 798.203749 0 0 1 95.106421-3.938934c32.293464 0.59099 64.782925 5.316912 97.666378 14.571758 32.883454 9.05785 65.372915 22.643624 97.666379 40.36533 32.292464 17.721706 63.994938 41.745307 95.106421 71.871807l7.875869-29.339513z m592.10117-306.387914c2.165964 0 3.740938-0.196997 4.922919-0.787987 0.983984-0.58999 0-0.786987-3.149948-0.786987-78.566696-7.482876-149.453519 4.528925-212.857466 36.230399-63.404947 31.702474-119.326019 78.172702-167.765215 139.607682l16.145732 27.369546c28.945519-39.77434 58.876023-72.658794 89.593512-98.453366 30.71749-25.794572 61.828974-46.273232 93.530448-61.238983 31.702474-14.963752 62.61696-25.596575 92.74346-31.504477s58.876023-9.451843 86.836558-10.435827z m-841.976022 824.255316c-8.664856-7.482876-5.907902-16.343729 8.072866-26.582558 13.979768-10.23983 34.458428-20.675657 61.237984-31.505477 26.976552-10.82982 57.299049-21.856637 91.168486-33.079451 33.867438-11.224814 66.357898-21.266647 97.665379-29.930503 13.980768-4.331928 25.007585-3.938935 33.080451 0.786987 8.073866 4.922918 15.555742 11.026817 22.644624 18.509692 7.088882 7.482876 15.555742 14.767755 25.794572 21.856637 10.23983 7.088882 25.007585 10.435827 44.304264 10.435827 19.29768 0 34.065434-3.543941 44.304264-10.435827 10.23983-6.891886 19.099683-13.979768 26.582559-20.872653 7.482876-7.087882 14.965752-12.995784 22.644624-17.721706 7.482876-4.921918 18.312696-5.709905 32.292464-2.361961 31.111484 8.663856 63.994938 18.902686 98.454366 30.71749 34.459428 11.813804 65.372915 23.431611 92.74346 34.655425 27.369546 11.223814 48.045202 22.053634 62.02597 32.292464 13.979768 10.23983 15.555742 17.919703 4.922918 23.432611-25.795572 13.979768-60.450996 25.597575-103.968273 34.655425-43.516278 9.05785-90.773493 15.949735-141.969644 20.084666-50.999153 4.331928-103.770277 6.497892-158.117375 6.497892-54.346098 0-105.738245-2.362961-153.981443-7.285879-48.439196-4.921918-91.364483-11.813804-128.973859-20.871653-38.003369-9.451843-64.782925-20.47866-80.928657-33.277448z"\n' +
            '                      fill="#0DAA66"></path>',
        tag: '游戏',
        tagColor: '#f44336'
      },
      {
        title: '迷宫',
        description: '迷宫',
        path: '/maze-game',
        type: 'ai',
        iconViewBox: '0 0 1024 1024',
        iconPath: '<path\n' +
            '                      d="M416.96 63.36L416.896 64H896a64 64 0 0 1 64 64v768a64 64 0 0 1-64 64H132.8a64 64 0 0 1-64-64V538.88l-0.576 0.064v-63.36l0.576-0.064V128a64 64 0 0 1 64-64h220.736V63.36h63.36z m-286.72 804.544a32 32 0 0 0 32 32h191.296v-107.328a31.68 31.68 0 0 1 63.36 0v107.328h285.376v-75.648H607.168a31.68 31.68 0 0 1 0-63.36h95.104v-95.168a31.68 31.68 0 0 1 63.36 0v234.176h100.992a32 32 0 0 0 32-32l-0.064-535.04h-132.864v142.72a31.68 31.68 0 0 1-63.36 0V332.8H607.104a31.68 31.68 0 1 1 0-63.36l291.392-0.064V161.472a32 32 0 0 0-32-32H416.96v92.416a31.68 31.68 0 0 1-63.36 0V129.472H162.24a32 32 0 0 0-32 32V475.52h223.36v-63.36a31.68 31.68 0 0 1 63.36 0v190.208a31.68 31.68 0 0 1-63.36 0v-63.36l-223.36-0.064v328.96z"\n' +
            '                      fill="#41CD64"></path>',
        tag: '游戏',
        tagColor: '#f44336'
      },
      {
        title: '飞机大战',
        description: '飞机大战',
        path: '/number-connection-game',
        type: 'ai',
        iconViewBox: '0 0 1024 1024',
        iconPath: '<path d="M32.9 102.5l683.8 204.4 204.4 683.7-107.4-55.3-119.9-206.7-216.8-182-182.1-216.8L88.3 209.9z"\n' +
            '                        fill="#8599A4"></path>\n' +
            '                  <path\n' +
            '                      d="M921.1 999.6c-1.4 0-2.8-0.3-4.1-1l-107.4-55.3c-1.5-0.8-2.8-2-3.7-3.5L686.8 734.5 471.2 553.4c-0.4-0.3-0.8-0.7-1.1-1.1L289 336.8 83.8 217.6c-1.5-0.9-2.7-2.1-3.5-3.7L24.9 106.6c-1.7-3.2-1.2-7.1 1.1-9.9 2.3-2.8 6-3.9 9.5-2.9l683.7 204.4c2.9 0.9 5.2 3.1 6 6L929.7 988c1 3.5-0.1 7.2-2.9 9.5-1.6 1.4-3.7 2.1-5.7 2.1z m-100.9-71.1l86.2 44.4-196.9-658.8L50.6 117.2 95 203.4 299.4 322c0.9 0.5 1.7 1.2 2.4 2l181.6 216.2 216.2 181.6c0.8 0.7 1.5 1.5 2 2.4l118.6 204.3z"\n' +
            '                      fill="#3E4152"></path>\n' +
            '                  <path d="M29 575.3l322.8 96.5 96.5 322.8-50.7-26.1-56.7-97.6L238.6 785l-86-102.4L55.1 626z"\n' +
            '                        fill="#8599A4"></path>\n' +
            '                  <path\n' +
            '                      d="M448.2 1003.6c-1.4 0-2.8-0.3-4.1-1l-50.7-26.1c-1.5-0.8-2.8-2-3.7-3.5l-55.8-96.2-101.1-84.9c-0.4-0.3-0.8-0.7-1.1-1.1l-84.9-101.1-96.2-55.8c-1.5-0.9-2.7-2.1-3.5-3.7L21 579.4c-1.7-3.2-1.2-7.1 1.1-9.9 2.3-2.8 6-3.9 9.5-2.9l322.8 96.5c2.9 0.9 5.2 3.1 6 6L456.9 992c1 3.5-0.1 7.2-2.9 9.5-1.7 1.4-3.7 2.1-5.8 2.1zM404 961.7l29.5 15.2-89-297.9-297.8-89 15.2 29.5 95.3 55.3c0.9 0.5 1.7 1.2 2.4 2L245 778.6 346.7 864c0.8 0.7 1.5 1.5 2 2.4l55.3 95.3z"\n' +
            '                      fill="#3E4152"></path>\n' +
            '                  <path\n' +
            '                      d="M942.3 202.6L254.5 890.5c-33.4 33.4-140 85.4-173.4 52-33.4-33.4 18.6-140 52-173.4L820.9 81.2c33.4-33.3 122.7-68 156.1-34.6 33.4 33.3-1.3 122.6-34.7 156z"\n' +
            '                      fill="#C1E7D8"></path>\n' +
            '                  <path\n' +
            '                      d="M113.5 962.3c-19.9 0-31.8-6.4-38.8-13.5-12.3-12.3-22.4-38.9-1.1-96.2 12.8-34.5 34.7-71.5 53.1-89.9L814.6 74.9c18.2-18.2 50.4-35.7 82-44.7 38.6-10.9 69.5-7.4 86.8 10 17.4 17.4 20.9 48.2 10 86.8-8.9 31.6-26.5 63.7-44.7 82L260.8 896.8c-18.5 18.5-55.4 40.3-89.9 53.1-24.2 9-42.9 12.4-57.4 12.4zM936.9 42c-10.4 0-22.4 1.8-35.5 5.5-28.4 8-58.2 24.1-74.1 40.1L139.4 775.5c-16.6 16.6-37.2 51.7-49 83.5-13.8 37.2-14.9 65.3-3 77.2 11.9 11.9 40 10.8 77.2-3 31.8-11.8 66.9-32.4 83.5-49L936 196.3c16-16 32.1-45.7 40.1-74.1 8.9-31.6 7-56.9-5.4-69.2-7.3-7.3-19-11-33.8-11z"\n' +
            '                      fill="#3E4152"></path>\n' +
            '                  <path d="M838.3 185.3m-36.8 0a36.8 36.8 0 1 0 73.6 0 36.8 36.8 0 1 0-73.6 0Z" fill="#9B5C77"\n' +
            '                  ></path>\n' +
            '                  <path\n' +
            '                      d="M838.3 231.1c-12.2 0-23.7-4.8-32.4-13.4-8.6-8.6-13.4-20.1-13.4-32.4 0-12.2 4.8-23.7 13.4-32.4 8.6-8.6 20.1-13.4 32.4-13.4 12.2 0 23.7 4.8 32.4 13.4 8.6 8.6 13.4 20.1 13.4 32.4 0 12.2-4.8 23.7-13.4 32.4-8.7 8.6-20.2 13.4-32.4 13.4z m0-73.6c-7.4 0-14.4 2.9-19.6 8.1-5.2 5.2-8.1 12.2-8.1 19.6 0 7.4 2.9 14.4 8.1 19.6 5.2 5.2 12.2 8.1 19.6 8.1 7.4 0 14.4-2.9 19.6-8.1 5.2-5.2 8.1-12.2 8.1-19.6 0-7.4-2.9-14.4-8.1-19.6-5.2-5.2-12.2-8.1-19.6-8.1z"\n' +
            '                      fill="#3E4152"></path>',
        tag: '游戏',
        tagColor: '#f44336'
      },
      {
        title: 'GeoJson转Shapefile',
        description: '地理数据格式转换工具',
        path: '/GeoJson-to-shapefile',
        type: 'ai',
        iconViewBox: '0 0 1024 1024',
        iconPath: '<path\n' +
            '                      d="M510.4 64c-247.4 0-448 200.6-448 448s200.6 448 448 448 448-200.6 448-448-200.6-448-448-448zM806 807.6c-38.4 38.4-83.1 68.5-132.9 89.6C621.6 919 566.8 930 510.4 930s-111.2-11-162.7-32.8c-49.8-21-94.5-51.2-132.9-89.6-38.4-38.4-68.5-83.1-89.6-132.9-21.8-51.5-32.8-106.3-32.8-162.7s11.1-111.2 32.8-162.7c21.1-49.8 51.2-94.5 89.6-132.9 38.4-38.4 83.1-68.5 132.9-89.6C399.2 105.1 454 94 510.4 94s111.2 11.1 162.7 32.8c49.8 21.1 94.5 51.2 132.9 89.6 38.4 38.4 68.5 83.1 89.6 132.9 21.8 51.5 32.8 106.3 32.8 162.7 0 56.4-11 111.2-32.8 162.7-21.1 49.8-51.2 94.5-89.6 132.9z"\n' +
            '                      fill="#2264F6" ></path>\n' +
            '                  <path\n' +
            '                      d="M830.1 511.7c0-176.6-143.3-319.8-320-319.8s-320 143.2-320 319.8c0 163.1 122.2 297.7 280.2 317.3 8.9 1.9 19.7 3 32.7 3 3.6 0 7.1-0.2 10.5-0.5 175.1-1.8 316.6-144.3 316.6-319.8z m-45.8 4.6c-0.9-16-3-31.6-6.2-46.7 0.3-5.4 0.4-10.6 0.2-15.3 4 18.6 6.1 37.8 6.1 57.6 0 1.4 0 2.9-0.1 4.4z m-548.5-4.6c0-19.4 2-38.3 5.8-56.5 11.8 12.7 39.8 12.4 46.6-6.6 12.2 7.3 28.6 8.6 28.6 23.1 0 47.9 1.7 99.2 45.2 100 1.2 0 24.3 8.7 35.2 37.2 3.8 9.8 18.8 0 35.2 0 8.2 0 0 13.8 0 43.7 0 29.8 64.2 75.7 64.2 75.7-0.3 19.7 0.5 35.7 2.2 48.4-14.5-0.3-26.7 1.7-36.3 4.9-128.8-22.4-226.7-134.7-226.7-269.9z m341.8 265.8c-1.4-7-7.6-10.8-19-7.8 9.1-38.6 13.5-60.2 32.4-76.6 27.4-23.7 3.3-50.1-17.6-47-16.4 2.5-6-20.3-20.7-21.6-14.6-1.2-33.8-30.4-54.8-40.4-11.2-5.3-22.1-19.5-39.4-20.2-15.3-0.6-37.6 12.9-37.6 2.5 0-33.5-3.4-57.5-4.1-67-0.6-7.7-5-2.6 15.6-2.1 11.2 0.3 5.7-22.6 16.9-23.5 10.9-0.9 36.9 10.2 43.6 5.8 6.2-4.1 45.3 102.7 45.3 17.7 0-10.1-5.2-27.6 0-37.2 20.7-37.8 40-68.5 38.3-73-1-2.5-21.1-4.6-37.3 0.8-5.4 1.8 1.7 10.3-6.1 12.2-29.3 6.8-55.2-7.9-46.1-21.7 9.3-14.1 42.9-6.2 45.8-34.5 1.7-16.2 3.1-35 4-49 39.4 6.2 35.1-51.2-23.5-57.3 118.6 1.4 219.1 78 255.9 184.2-1.9-1.7-4-2.7-6.5-3-17.7-44.3-60.7-12.2-46.1 26.8-78.2 60.1-58.2 102-32.5 126 13.5 12.6 26.4 31.6 34.8 45.2-9.1 26.6 33.6 16 54.7-29.2-26.7 93.2-101.6 166-196 189.9z m0 0"\n' +
            '                      fill="#82AAFC" ></path>',
        tag: '工具',
        tagColor: '#ff9800'
      },
      {
        title: '单词学习系统',
        description: '单词学习系统',
        path: '/word-study-system/home',
        type: 'ai',
        iconViewBox: '0 0 1024 1024',
        iconPath: '<path d="M881.686798 282.167952a23.797805 23.797805 0 0 0-16.538852-22.282596L524.280213 144.332142a37.557103 37.557103 0 0 0-24.512261 0l-341.052367 115.332455a23.829915 23.829915 0 0 0-16.484666 22.336783 23.831922 23.831922 0 0 0 15.844465 22.794355l181.339354 67.377611v16.574976H179.197993c-20.420194 0-36.973095 16.552901-36.973095 36.975102v271.13603c0 20.422201 16.552901 36.975102 36.973095 36.975102h12.324365V807.776733a24.64873 24.64873 0 1 0 39.439574 19.719786l124.883286-93.667983h119.139542v12.328378c0 20.418188 16.554907 36.971088 36.973095 36.971089h156.114644l124.885293 93.667983a24.646723 24.646723 0 1 0 39.43556-19.71778v-73.950203h12.326372c20.420194 0 36.973095-16.552901 36.973095-36.971089V475.018877c0-20.420194-16.552901-36.973095-36.973095-36.973095h-160.216745v-65.627594l172.54111-64.086297v80.416431a12.326372 12.326372 0 1 0 24.652744 0c-0.010034-67.128755 0.188648-108.059454-0.010035-106.58037zM216.171088 807.776733v-73.948197h24.64873a12.324365 12.324365 0 1 0 0-24.650737H179.197993a12.324365 12.324365 0 0 1-12.324365-12.326372v-271.132017a12.326372 12.326372 0 0 1 12.324365-12.326371h332.757855a12.324365 12.324365 0 0 1 12.324365 12.326371V696.855441a12.322358 12.322358 0 0 1-12.324365 12.326371H290.117278a12.326372 12.326372 0 0 0 0 24.650737h24.64873L216.171088 807.776733z m640.86698-332.757856v271.138037a12.322358 12.322358 0 0 1-12.324365 12.324365H783.091878a12.326372 12.326372 0 1 0 0 24.650737h24.64873v73.950204l-98.59492-73.950204h24.646723a12.324365 12.324365 0 1 0 0-24.650737H511.955848a12.322358 12.322358 0 0 1-12.324365-12.324365v-12.328378h12.324365c20.418188 0 36.971088-16.550894 36.971088-36.971089V462.696519h295.786767a12.322358 12.322358 0 0 1 12.324365 12.322358z m-308.109125-36.971088v-12.324365c0-20.422201-16.552901-36.975102-36.971088-36.975102h-147.89238v-61.621825c0-13.038821 56.151019-36.973095 147.89238-36.973095 91.739354 0 147.89238 23.934274 147.89238 36.973095v110.919285l-110.921292 0.002007z m135.568015-91.928002v-18.991283c0-82.19053-345.08222-82.166447-345.08222 0v18.744434l-170.925556-63.496268 339.266227-114.764503c6.161179-2.145375-13.853622-7.541925 347.657071 115.011351l-170.915522 63.496269z" fill="#E36559" ></path><path d="M423.662339 621.606773a83.069552 83.069552 0 0 1 3.130762 8.669803c0.800753 2.729382 1.204139 5.139668 1.20414 7.224835 0 3.694701-1.246284 6.540483-3.732832 8.549389-2.490561 2.006899-6.544497 3.010348-12.161806 3.010348h-7.947319c-5.621323 0-9.633114-1.244277-12.041392-3.730825-2.408278-2.488554-4.256632-5.494889-5.539041-9.031044l-9.873942-29.383004h-64.060207l-9.873941 29.383004c-1.288429 3.536156-3.130762 6.54249-5.539041 9.031044-2.408278 2.486548-6.424083 3.730825-12.041392 3.730825h-7.947319c-5.621323 0-9.673252-1.003449-12.161806-3.010348-2.490561-2.008906-3.732832-4.854688-3.732832-8.549389 0-2.085168 0.399373-4.491439 1.20414-7.224835a80.958294 80.958294 0 0 1 3.130761-8.669803l48.16557-126.916274c2.566823-6.580621 5.978551-11.638006 10.235183-15.172155 4.252618-3.530135 10.152901-5.30022 17.700847-5.300219h5.779868c7.706491 0 13.685042 1.848354 17.941675 5.541047 4.252618 3.694701 7.586077 8.667796 9.994355 14.92932l48.165569 126.918281z m-99.702728-48.165569h41.42239l-20.711195-61.651928-20.711195 61.651928zM615.754657 638.988523c0-10.433866 2.968203-19.023393 8.906616-25.768579 5.938413-6.741173 13.727187-11.718282 23.364315-14.927313 9.631107-3.213045 19.986704-4.816557 31.064785-4.816557h12.041392c0-6.418062-1.52725-11.318909-4.575729-14.688492-3.052493-3.373597-8.346692-5.059392-15.894637-5.059391-5.139668 0-9.554845 0.842897-13.245532 2.530699a147.412731 147.412731 0 0 0-10.116776 5.057385c-3.052493 1.687802-6.259517 2.530699-9.631107 2.530699-4.334901 0-7.55196-1.926623-9.637128-5.779868-1.607526-2.727375-2.404265-6.420069-2.404265-11.080088 0-5.777861 3.528128-10.355597 10.592412-13.727187 3.373597-1.603512 7.469677-3.010348 12.28222-4.214488a129.836312 129.836312 0 0 1 14.449671-2.771527c4.816557-0.638194 8.988899-0.961304 12.523048-0.961304 12.838131 0 23.157604 2.049044 30.946378 6.14111 7.78476 4.09608 13.404077 9.873942 16.857949 17.343619 3.449859 7.465663 5.175792 16.179617 5.175792 26.131828l0.238821 41.183568c0 6.903732 0.363249 12.161806 1.083725 15.77021 0.722484 3.616431 1.446974 6.263531 2.167451 7.949326 0.722484 1.687802 1.161994 3.010348 1.324553 3.971653 0.319097 2.087175-0.08429 3.893384-1.206146 5.418626-1.127877 1.523236-2.647099 2.926058-4.573722 4.214487-2.089182 1.286422-4.617874 2.24572-7.586078 2.889935-2.97021 0.636187-5.817999 0.961304-8.549388 0.961304-3.855252 0-7.06629-1.406836-9.633114-4.216494-2.570837-2.807651-4.334901-8.226278-5.302226-16.257887-3.052493 5.62333-8.348699 10.594418-15.894638 14.92932-7.549953 4.334901-15.7381 6.502352-24.56444 6.502352-11.720288 0-21.355409-3.492004-28.895328-10.478018-7.537912-6.984008-11.308874-16.57297-11.308874-28.778928z m36.362997-2.169457c0 5.62333 1.322546 9.5127 3.971653 11.678143 2.649106 2.167451 6.381938 3.251176 11.198495 3.251176 4.009784 0 7.826905-0.963311 11.437316-2.887927a24.923675 24.923675 0 0 0 8.908623-7.949326c2.325996-3.37159 3.492004-7.142553 3.492004-11.318909v-10.35359h-12.041393c-3.694701 0.160552-7.66836 0.600063-11.920978 1.322546s-7.824898 2.287865-10.716839 4.69815c-2.88592 2.408278-4.328881 6.263531-4.328881 11.559737z" fill="#E36559" ></path>',
        tag: '学习',
        tagColor: '#ff9800'
      },
      {
        title: '登录页面',
        description: '登录页面',
        path: '/login01',
        type: 'ai',
        iconViewBox: '0 0 1024 1024',
        iconPath: '',
        tag: '工具',
        tagColor: '#ff9800'
      }
    ]
  },
  {
    id: 'resources',
    name: '学习资源',
    icon: Notebook,
    features: [
      {
        title: '教程文档',
        description: '详细的技术教程和开发文档',
        path: '/tutorials',
        type: 'doc',
        iconComponent: Document,
        tag: '学习',
        tagColor: ''
      },
      {
        title: '速查表',
        description: '常用命令和语法速查手册',
        path: '/cheatsheets',
        type: 'memo',
        iconComponent: Memo,
        tag: '参考',
        tagColor: ''
      }
    ]
  },
  {
    id: 'geoserver',
    name: '地理信息系统',
    icon: Notebook,
    features: [
      {
        title: '第一次课后作业',
        description: '调用自己发布的geoserver服务',
        path: '/geo-information-system01',
        type: 'ai',
        iconViewBox: '0 0 1024 1024',
        iconPath: '<path d="M520.2 853.6h-78.4V753.5h78.4v100.1z" fill="#F65D73" ></path>' +
            '<path d="M486.1 852.9v-99.4h34.1v100.1" fill="#F04B69" ></path>' +
            '<path d="M217.7 666.2c-5-5-6.9-12.2-5.1-18.9s7.1-12 13.9-13.9c6.8-1.8 14 0.1 18.9 5.1 130.1 130.1 341.1 130.1 471.2 0s130.1-341.1 0-471.2c-7.7-7.7-7.6-20.1 0-27.7s20.1-7.6 27.7 0C851 246 882.9 406.2 825.2 545.4c-57.7 139.2-193.5 229.9-344.1 229.7-98.8 0.2-193.6-39-263.4-108.9z" fill="#F65D73" ></path>' +
            '<path d="M190 713.5c-7.9 0-15.1-4.8-18.1-12.1-3-7.3-1.4-15.7 4.2-21.4l97-97c4.9-5.1 12.2-7.1 19.1-5.3 6.9 1.8 12.2 7.1 14 14 1.8 6.9-0.2 14.1-5.3 19.1l-97 97c-3.7 3.6-8.7 5.7-13.9 5.7zM657 216.3c-3-7.3-1.4-15.7 4.2-21.4l97-97c4.9-5.1 12.2-7.1 19.1-5.3 6.9 1.8 12.2 7.1 14 14 1.8 6.9-0.2 14.1-5.3 19.1l-97 97c-3.7 3.7-8.7 5.7-13.9 5.7-8 0-15.1-4.7-18.1-12.1z" fill="#F77490" ></path>' +
            '<path d="M303.1 951.8H659c6.2 0 11.3-5.1 11.3-11.3V931c0-42.9-35.1-78-78-78H369.8c-42.9 0-78 35.1-78 78v9.5c0 6.2 5.1 11.3 11.3 11.3z" fill="#F65D73" ></path>' +
            '<path d="M407.8 852.9h78.4v0.7h-78.4z" fill="#F65D73" ></path>' +
            '<path d="M407.8 852.9h112.5v0.7H407.8z" fill="#F65D73" ></path>' +
            '<path d="M775.7 400.7c0 162.7-131.9 294.6-294.7 294.6-12.2 0-24.2-0.7-36-2.2l-14.7-2.2C291.8 666.8 186.4 546 186.4 400.6c0-136.9 93.4-252.1 220-285.1 23.8-6.2 48.9-9.5 74.6-9.5 14 0 27.7 1 41.2 2.8C665.5 128.9 775.7 252 775.7 400.7z" fill="#8ADCFF" ></path>' +
            '<path d="M522.2 108.9c-2 6.2-4.1 12.7-6 18.5C502.1 186.3 462.9 236 409 263.6l-12.6 6.4c-26.3 13.4-42.9 40.5-42.9 70.1 0 9.3 1.6 18.5 4.8 27.2l22.2 60.4L276 392.4c-23.6 0-44-16.3-49.3-39.3l-4.7-20.4c26-82.2 98.6-170.3 184.3-217.1 23.8-6.2 48.9-9.5 74.6-9.5 14.1 0 27.9 0.9 41.3 2.8zM551 499.4V558c0 9.4-7.6 17.1-17.1 17.1-9.4 0-17.1 7.6-17.1 17.1 0 20.3-8.3 39.8-22.9 53.9L445 693.2l-14.7-2.2v-23L412 616.4v-47.7l-35.4-29c-26.1-21.4-30.8-59.5-10.7-86.6 19.9-26.7 57.1-33.4 85-15.4l26.1 16.9 63.9 29.3c6.2 2.8 10.1 8.8 10.1 15.5z" fill="#FAD672" ></path>' +
            '<path d="M711.5 217.1c-1.6 1.2-2.6 1.9-2.6 1.9l-6.6 4.7c-21.9 15.4-50.5 17.5-74.4 5.4-35.3-17.9-78.2-0.2-90.7 37.3-12.7 38 11.8 78.2 51.3 84.4 24.8 3.9 45 21.9 51.9 46 5.2 18.3 7.8 37.2 7.8 56.2 0 42.1 34.2 76.3 76.3 76.3h15l5.7 2.1c19.5-39.4 30.5-83.8 30.5-130.7 0-69.4-24-133.2-64.2-183.6zM200.1 311.7l4.6 20.4c5.2 23 25.7 39.3 49.3 39.3l104.4 35.3-22.2-60.4c-3.2-8.7-4.8-17.9-4.8-27.2 0-29.6 16.6-56.6 42.9-70.1l12.6-6.4c54-27.5 93.2-77.3 107.3-136.2-4.4-0.2-8.8-0.3-13.2-0.3-131.6 0-243.1 86.4-280.9 205.6zM343.9 432c-20.2 27.1-15.5 65.3 10.7 86.6l35.4 29v47.7l18.3 51.6v39.3l63.6-61.4c14.6-14.1 22.9-33.6 22.9-53.9 0-9.4 7.6-17.1 17.1-17.1 9.4 0 17.1-7.6 17.1-17.1v-58.6c0-6.7-3.9-12.7-10-15.5l-63.9-29.3-26.1-16.9c-28-17.8-65.2-11.1-85.1 15.6z" fill="#FDF17F" ></path>' +
            '<path d="M775.7 400.7C775.7 540 679 656.8 549 687.5c104.3-58.6 174.7-170.3 174.7-298.4 0-99.6-42.6-189.3-110.5-251.8 96.3 48.4 162.5 148.2 162.5 263.4z" fill="#46CDFB" ></path>' +
            '<path d="M775.7 400.7c0 47-11 91.3-30.5 130.7l-5.7-2.1h-15c-10 0-19.6-1.9-28.3-5.4 17.8-41.4 27.6-86.9 27.6-134.8 0-56.5-13.7-109.8-37.9-156.7 5.8-2.1 11.3-5 16.5-8.7l6.6-4.7s1-0.7 2.6-1.9c40.1 50.4 64.1 114.2 64.1 183.6z" fill="#FAD672" ></path>' +
            '<path d="M670.3 931v9.5c0 6.2-5.1 11.3-11.3 11.3h-46.9c6.2 0 11.3-5.1 11.3-11.3V931c0-42.9-35.1-78-78-78h46.9c42.9-0.1 78 35 78 78z" fill="#F04B69" ></path>',
        tag: '作业',
        tagColor: '#ff9800'
      },
      {
        title: '第一次实验',
        description: '叠加多个控件',
        path: '/geo-information-system02',
        type: 'ai',
        iconViewBox: '0 0 1024 1024',
        iconPath: '<path d="M520.2 853.6h-78.4V753.5h78.4v100.1z" fill="#F65D73" ></path>' +
            '<path d="M486.1 852.9v-99.4h34.1v100.1" fill="#F04B69" ></path>' +
            '<path d="M217.7 666.2c-5-5-6.9-12.2-5.1-18.9s7.1-12 13.9-13.9c6.8-1.8 14 0.1 18.9 5.1 130.1 130.1 341.1 130.1 471.2 0s130.1-341.1 0-471.2c-7.7-7.7-7.6-20.1 0-27.7s20.1-7.6 27.7 0C851 246 882.9 406.2 825.2 545.4c-57.7 139.2-193.5 229.9-344.1 229.7-98.8 0.2-193.6-39-263.4-108.9z" fill="#F65D73" ></path>' +
            '<path d="M190 713.5c-7.9 0-15.1-4.8-18.1-12.1-3-7.3-1.4-15.7 4.2-21.4l97-97c4.9-5.1 12.2-7.1 19.1-5.3 6.9 1.8 12.2 7.1 14 14 1.8 6.9-0.2 14.1-5.3 19.1l-97 97c-3.7 3.6-8.7 5.7-13.9 5.7zM657 216.3c-3-7.3-1.4-15.7 4.2-21.4l97-97c4.9-5.1 12.2-7.1 19.1-5.3 6.9 1.8 12.2 7.1 14 14 1.8 6.9-0.2 14.1-5.3 19.1l-97 97c-3.7 3.7-8.7 5.7-13.9 5.7-8 0-15.1-4.7-18.1-12.1z" fill="#F77490" ></path>' +
            '<path d="M303.1 951.8H659c6.2 0 11.3-5.1 11.3-11.3V931c0-42.9-35.1-78-78-78H369.8c-42.9 0-78 35.1-78 78v9.5c0 6.2 5.1 11.3 11.3 11.3z" fill="#F65D73" ></path>' +
            '<path d="M407.8 852.9h78.4v0.7h-78.4z" fill="#F65D73" ></path>' +
            '<path d="M407.8 852.9h112.5v0.7H407.8z" fill="#F65D73" ></path>' +
            '<path d="M775.7 400.7c0 162.7-131.9 294.6-294.7 294.6-12.2 0-24.2-0.7-36-2.2l-14.7-2.2C291.8 666.8 186.4 546 186.4 400.6c0-136.9 93.4-252.1 220-285.1 23.8-6.2 48.9-9.5 74.6-9.5 14 0 27.7 1 41.2 2.8C665.5 128.9 775.7 252 775.7 400.7z" fill="#8ADCFF" ></path>' +
            '<path d="M522.2 108.9c-2 6.2-4.1 12.7-6 18.5C502.1 186.3 462.9 236 409 263.6l-12.6 6.4c-26.3 13.4-42.9 40.5-42.9 70.1 0 9.3 1.6 18.5 4.8 27.2l22.2 60.4L276 392.4c-23.6 0-44-16.3-49.3-39.3l-4.7-20.4c26-82.2 98.6-170.3 184.3-217.1 23.8-6.2 48.9-9.5 74.6-9.5 14.1 0 27.9 0.9 41.3 2.8zM551 499.4V558c0 9.4-7.6 17.1-17.1 17.1-9.4 0-17.1 7.6-17.1 17.1 0 20.3-8.3 39.8-22.9 53.9L445 693.2l-14.7-2.2v-23L412 616.4v-47.7l-35.4-29c-26.1-21.4-30.8-59.5-10.7-86.6 19.9-26.7 57.1-33.4 85-15.4l26.1 16.9 63.9 29.3c6.2 2.8 10.1 8.8 10.1 15.5z" fill="#FAD672" ></path>' +
            '<path d="M711.5 217.1c-1.6 1.2-2.6 1.9-2.6 1.9l-6.6 4.7c-21.9 15.4-50.5 17.5-74.4 5.4-35.3-17.9-78.2-0.2-90.7 37.3-12.7 38 11.8 78.2 51.3 84.4 24.8 3.9 45 21.9 51.9 46 5.2 18.3 7.8 37.2 7.8 56.2 0 42.1 34.2 76.3 76.3 76.3h15l5.7 2.1c19.5-39.4 30.5-83.8 30.5-130.7 0-69.4-24-133.2-64.2-183.6zM200.1 311.7l4.6 20.4c5.2 23 25.7 39.3 49.3 39.3l104.4 35.3-22.2-60.4c-3.2-8.7-4.8-17.9-4.8-27.2 0-29.6 16.6-56.6 42.9-70.1l12.6-6.4c54-27.5 93.2-77.3 107.3-136.2-4.4-0.2-8.8-0.3-13.2-0.3-131.6 0-243.1 86.4-280.9 205.6zM343.9 432c-20.2 27.1-15.5 65.3 10.7 86.6l35.4 29v47.7l18.3 51.6v39.3l63.6-61.4c14.6-14.1 22.9-33.6 22.9-53.9 0-9.4 7.6-17.1 17.1-17.1 9.4 0 17.1-7.6 17.1-17.1v-58.6c0-6.7-3.9-12.7-10-15.5l-63.9-29.3-26.1-16.9c-28-17.8-65.2-11.1-85.1 15.6z" fill="#FDF17F" ></path>' +
            '<path d="M775.7 400.7C775.7 540 679 656.8 549 687.5c104.3-58.6 174.7-170.3 174.7-298.4 0-99.6-42.6-189.3-110.5-251.8 96.3 48.4 162.5 148.2 162.5 263.4z" fill="#46CDFB" ></path>' +
            '<path d="M775.7 400.7c0 47-11 91.3-30.5 130.7l-5.7-2.1h-15c-10 0-19.6-1.9-28.3-5.4 17.8-41.4 27.6-86.9 27.6-134.8 0-56.5-13.7-109.8-37.9-156.7 5.8-2.1 11.3-5 16.5-8.7l6.6-4.7s1-0.7 2.6-1.9c40.1 50.4 64.1 114.2 64.1 183.6z" fill="#FAD672" ></path>' +
            '<path d="M670.3 931v9.5c0 6.2-5.1 11.3-11.3 11.3h-46.9c6.2 0 11.3-5.1 11.3-11.3V931c0-42.9-35.1-78-78-78h46.9c42.9-0.1 78 35 78 78z" fill="#F04B69" ></path>',
        tag: '作业',
        tagColor: '#ff9800'
      },

    ]
  }
]

// 改进后的搜索功能
const filteredCategories = computed(() => {
  const query = searchQuery.value.trim().toLowerCase()
  if (!query) return categories

  return categories.map(category => {
    // 检查分类名称是否匹配
    const isCategoryMatch = category.name.toLowerCase().includes(query)

    // 过滤功能卡片
    const filteredFeatures = category.features.filter(feature => {
      return (
          feature.title.toLowerCase().includes(query) ||
          feature.description.toLowerCase().includes(query) ||
          (feature.tag && feature.tag.toLowerCase().includes(query)))
    })

    // 如果分类名称匹配或功能卡片有匹配项，则保留该分类
    return isCategoryMatch || filteredFeatures.length > 0 ? {
      ...category,
      features: isCategoryMatch ? category.features : filteredFeatures
    } : null
  }).filter(Boolean) // 过滤掉null值
})


const handleSearch = () => {
  // 搜索逻辑已在计算属性中处理
}
</script>

<style scoped>
.features-container {
  min-height: 100vh;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  position: relative;
}

/* 固定头部样式 */
.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  z-index: 1000;
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
}

/* Logo区域样式 */
.logo-area {
  display: flex;
  align-items: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.logo-area:hover {
  opacity: 0.8;
}

.logo-image {
  width: 36px;
  height: 36px;
  margin-right: 12px;
}

.logo-text {
  font-size: 1.3rem;
  font-weight: 600;
  color: #334155;
  background: linear-gradient(90deg, #3b82f6, #10b981);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* 搜索框样式 */
.search-container {
  width: 300px;
}

.search-input {
  border-radius: 50px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.search-input :deep(.el-input__wrapper) {
  border-radius: 50px;
  padding: 8px 16px;
  background: rgba(248, 250, 252, 0.8);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.search-input :deep(.el-input__inner) {
  font-size: 0.95rem;
}

.search-icon {
  color: #94a3b8;
  font-size: 1.1rem;
}

/* 主内容区域 */
.main-content {
  padding: 100px 30px 60px;
  max-width: 1400px;
  margin: 0 auto;
}

/* 功能卡片区域样式 */
.features-grid {
  margin-top: 20px;
}

.category-section {
  margin-bottom: 50px;
}

.category-title {
  display: flex;
  align-items: center;
  font-size: 1.5rem;
  color: #1e293b;
  margin-bottom: 25px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
  position: relative;
}

.category-title::after {
  content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #10b981);
}

.category-icon {
  margin-right: 12px;
  font-size: 1.6rem;
  color: #3b82f6;
}

.category-count {
  margin-left: 12px;
  font-size: 0.9rem;
  color: #64748b;
  background: #f1f5f9;
  padding: 2px 8px;
  border-radius: 10px;
  font-weight: normal;
}

.cards-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 25px;
}

.feature-card {
  border-radius: 14px;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  cursor: pointer;
  overflow: hidden;
  border: none;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(226, 232, 240, 0.6);
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  border-color: rgba(148, 163, 184, 0.3);
}

.card-content {
  padding: 22px;
  text-align: center;
}

.card-icon {
  margin: 0 auto 18px;
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: all 0.3s ease;
  background: white;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);

}

.error-icon {
  background: linear-gradient(135deg, rgba(239, 68, 68, 0.1) 0%, rgba(255, 255, 255, 0.9) 100%);
}

.error-icon svg {
  transition: transform 0.3s ease;
}

.feature-card:hover .error-icon {
  transform: scale(1.05) rotate(-5deg);
}

.ai-icon {
  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(255, 255, 255, 0.9) 100%);
}

.ai-icon svg {
  transition: transform 0.3s ease;
}

.feature-card:hover .ai-icon {
  transform: rotate(-15deg) scale(1.1);
  color: #c62828;
}


.card-title {
  font-size: 1.2rem;
  color: #1e293b;
  margin-bottom: 12px;
  font-weight: 600;
}

.card-desc {
  color: #64748b;
  font-size: 0.95rem;
  margin-bottom: 18px;
  min-height: 40px;
  line-height: 1.5;
}

.card-tag {
  margin: 0 auto;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* 响应式设计 */
@media (max-width: 1024px) {
  .cards-container {
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  }

  .main-content {
    padding: 100px 25px 50px;
  }
}

@media (max-width: 768px) {
  .fixed-header {
    padding: 0 20px;
    height: 70px;
  }

  .logo-image {
    width: 32px;
    height: 32px;
  }

  .logo-text {
    font-size: 1.2rem;
  }

  .search-container {
    width: 220px;
  }

  .cards-container {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }

  .main-content {
    padding: 90px 20px 40px;
  }

  .category-count {
    font-size: 0.8rem;
    padding: 1px 6px;
  }
}

@media (max-width: 480px) {
  .fixed-header {
    padding: 0 15px;
    height: 60px;
    flex-direction: column;
    justify-content: center;
  }

  .logo-area {
    margin-bottom: 5px;
  }

  .search-container {
    width: 100%;
    max-width: 280px;
  }

  .cards-container {
    grid-template-columns: 1fr;
  }

  .main-content {
    padding: 100px 15px 30px;
  }

  .card-icon {
    width: 70px;
    height: 70px;
  }

  .category-count {
    display: none;
  }
}
</style>